<template>
	<view>
		
		<!-- 小程序顶部样式 -->
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="content">公司详情</block>
		</cu-custom>
		
		<swiper class="card-swiper square-dot" :indicator-dots="true" :circular="true"
		 :autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
		 indicator-active-color="#0081ff">
			<swiper-item v-for="(item,index) in detail.banner" :key="index">
				<view class="swiper-item">
					<image mode="aspectFill" :src="item"></image>
				</view>
			</swiper-item>
		</swiper>
		
		<view class="bg-white">
			<view class="flex padding solid-bottom">
				<view class="flex" style="flex-direction: column;width: 80%;">
					<view>
						{{ detail.name }}
					</view>
					<view class="text-gray" style="font-size: 25rpx; margin-top: 10rpx;">
						<text v-if="detail.area">
							{{ detail.area }}
						</text>
						<text v-if="detail.classify">
							·{{ detail.classify }}
						</text>
						<text v-if="detail.members">
							·{{ detail.members }}
						</text>
					</view>
					<view v-if="detail.infos" class="text-gray" style="font-size: 25rpx;margin-top: 10rpx;">
						{{ detail.infos }}人想来这里工作
					</view>
				</view>
				<view>
					<image class="border solid radius"
					 style="width: 120rpx; height: 120rpx;border: solid 1px white" 
					 :src="handleImg(detail.logo)" mode="scaleToFill"></image>
				</view>
			</view>
			
			<view class="flex align-center justify-around solid-bottom" style="height: 150rpx;">
				<view class="flex justify-center align-center flex-direction">
					<view>
						<image class="logo" src="../../static/detail.png" mode=""></image>
					</view>
					<view class="logo_text text-gray">
						详情
					</view>
				</view>
				<view class="flex justify-center align-center flex-direction" @tap="toFunction(1)">
					<view>
						<image class="logo" src="../../static/dp.png" mode=""></image>
					</view>
					<view class="logo_text text-gray">
						点评
					</view>
				</view>
				<view class="flex justify-center align-center flex-direction" @tap="toFunction(2)">
					<view>
						<image class="logo" src="../../static/ms.png" mode=""></image>
					</view>
					<view class="logo_text text-gray">
						面试
					</view>
				</view>
				<view class="flex justify-center align-center flex-direction" @tap="toFunction(3)">
					<view>
						<image class="logo" src="../../static/gz.png" mode=""></image>
					</view>
					<view class="logo_text text-gray">
						工资
					</view>
				</view>
			</view>
			
			<view class="padding">
				<view class="solid-bottom">
					<view style="">
						<view class="text-bold">
							公司概况
						</view>
						<view class="flex align-center">
							<view class="margin" style="margin-left: 0rpx;width: 100rpx;height: 100rpx;">
								<canvas style="" canvas-id="rateCanvas"></canvas>
							</view>
							<view class="">
								<view>
									好评率
								</view>
								<view class="text-gray logo_text">
									来自{{ detail.dianpingNum }}名员工真实好评
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="padding solid-bottom">
					<text style="color: #817F80;font-size: 26rpx;line-height: 50rpx;">
						简介：{{ detail.desc || '' }}
					</text>
				</view>
				<view class="padding solid-bottom">
					<text>
						地址：{{ detail.addr || '' }}
					</text>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		watch: {
			loading(newValue, oldValue) {
				if(newValue){
					uni.showLoading({
						title: '加载中'
					});
				}else{
					uni.hideLoading();
				}
			}
		},
		data() {
			return {
				loading: false,
				companyId: '',
				cardCur: 0,
				detail: {},
			}
		},
		onLoad(option) {
			this.companyId = option.id
			//todo- remove
			// this.companyId = '2147'
			
			this.fatchData()
		},
		methods: {
			toFunction(tab){
				uni.navigateTo({
					url: 'function/function?tab=' + tab + '&companyId=' + this.companyId
				})
			},
			loadCanvas(){
				var context = uni.createCanvasContext('rateCanvas')
				this.$util.circleProgress(context, this.detail.userstars, 50, 52, 52)
			},
			handleImg(img){
				return this.$api.baseUrl + img
			},
			async fatchData(){
				this.loading = true
				let res = await this.$api.queryCompanyDetail({
					key: this.$util.getKey(),
					company_id: this.companyId,
					uid: this.$util.getUid()
				})
				this.loading = false
				if(res && res.data){
					this.detail = res.data.data
					this.loadCanvas()
				}
			},
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
		},
		
	}
</script>

<style>

.logo{
	width: 80rpx; 
	height: 80rpx;
	border-radius: 50%;
}
.logo_text{
	font-size: 25rpx;
}
</style>
